import React, { useState, useEffect } from "react";
import { Modal } from "antd";
import RemoteTxtFilePreview from "./txtviewer";
import OfficePreview from "./office";
import genaratorType from '@/utils/genaratorType';


function FileViewer({ actionRef }) {
  const [modal, setModal] = useState({
    open: false,
    footer: false,
    onCancel: () => {
      setModal((s) => ({
        ...s,
        open: false,
      }));
    },
  });

  useEffect(() => {
    actionRef.current = {
      open: (url,name) => {
        setModal((s) => ({
          ...s,
          open: true,
          title: name,
          url,
          type: genaratorType(url)
        }));
      },
      close: () => {
        setModal((s) => ({
          ...s,
          open: false,
        }));
      },
    };
  }, []);

  return (
    <Modal
      {...modal}
      width={"calc(100vw - 40px)"}
      footer={false}
      style={{ top: 20 }}
      destroyOnClose={true}
    >
      {modal?.type === "txt" ? (
        <div className="centerl">
          <RemoteTxtFilePreview url={modal.url} />
        </div>
      ) : modal?.type === "mp3" ? (
        <div className="center">
          <audio src={modal?.url} controls />
        </div>
      ) : modal?.type === "mp4" ? (
        <video
          src={modal?.url}
          controls
          style={{ width: "100%", height: "calc(100vh - 110px)" }}
        />
      ) : (
        <OfficePreview
          url={modal?.url}
          type={modal?.type}
          name={modal?.title}
        />
      )}
    </Modal>
  );
}

export default FileViewer;
